<template>
  <div class="orderTab">
    <button-tab style="width: 60%; margin: 0 auto">
      <button-tab-item selected @on-item-click="selectOrder = 0">已完成</button-tab-item>
      <button-tab-item @on-item-click="selectOrder = 1"><span class="vux-reddot-s">未支付</span></button-tab-item>
      <button-tab-item @on-item-click="selectOrder = 2">已取消</button-tab-item>
    </button-tab>

    <div class="order-block" v-show="selectOrder === 0" v-for="(order, index) in orderList" :key="index">
      <img :src="order.image">
      <div class="content-block">
        <span class="name-line">{{order.name}}</span>
        <span class="price-line"><font size="1">&yen;</font>{{order.price}}</span>
        <span class="num-line">×1</span>
      </div>
      <button class="cancel-btn">×</button>
    </div>

  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem } from 'vux'

export default {
  props: {
  },
  components: {
    ButtonTab,
    ButtonTabItem
  },
  data () {
    return {
      selectOrder: 0,
      orderList: [
        {
          id: 1,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/213177291fb943d7b113f1ee41c38ac8.jpg',
          name: '往后余生',
          price: 10000
        }, {
          id: 2,
          image: 'https://mgil.oss-cn-hangzhou.aliyuncs.com/package/347f095fc0ee456fa8f9767d4b17aeca.jpg',
          name: '风雪是你',
          price: 10000
        }
      ]
    }
  },
  watch: {

  },
  methods: {

  }
}
</script>

<style lang="less">
.orderTab {
  .order-block {
    position: relative;
    width: 86%;
    height: 80px;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    margin: 15px auto 0 auto;
    box-shadow: 0 5px 15px @shadow-color;
    img {
      display: block;
      float: left;
      height: 80px;
      width: 110px;
      border-radius: 10px;
    }
    .content-block {
      position: relative;
      height: 80px;
      span {
        position: absolute;
        display: block;
        color: @font-color;
      }
      .name-line {
        top: 5px;
        left: 130px;
      }
      .price-line {
        bottom: 5px;
        left: 130px;
        font-weight: bold;
        font-size: 17px;
      }
      .num-line {
        bottom: 5px;
        right: 10px;
      }
    }
    .cancel-btn {
      position: absolute;
      right: -8px;
      top: 15px;
      border: none;
      height: 30px;
      width: 30px;
      border-radius: 5px;
      background: @btn-color;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      box-shadow: 0 5px 15px @btn-shadow-color;
    }
  }
}
</style>
